<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>管理员个人信息</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<style>
body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    background-color: #f5f5f5;
    padding: 20px;
}
.place {
    height: 40px;
    line-height: 40px;
    background: #f8f8f8;
    border-radius: 5px;
    padding: 0 15px;
    margin-bottom: 20px;
    border: 1px solid #e6e6e6;
    clear: both;
}
.place-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
.place-nav li {
    position: relative;
    margin-right: 25px;
}
.place-nav li:not(:last-child):after {
    content: ">";
    position: absolute;
    right: -15px;
    color: #999;
}
.place-nav li a {
    color: #337ab7;
    text-decoration: none;
}
.place-nav li a:hover {
    text-decoration: underline;
}
.place-label {
    font-weight: bold;
    color: #333;
    margin-right: 10px;
}
.profile-panel {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.profile-panel h3 {
    color: #333;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.form-horizontal .control-label {
    padding-top: 7px;
    text-align: right;
}
.btn-save {
    margin-top: 15px;
}
.alert {
    display: none;
    margin-top: 15px;
}
</style>
</head>

<body>
    <div class="place">
        <ul class="place-nav">
            <li class="place-label">位置：</li>
            <li><a href="admin_index.html" target="rightFrame">首页</a></li>
            <li>个人信息</li>
        </ul>
    </div>
    
    <div class="profile-panel">
        <h3>管理员个人信息</h3>
        <form class="form-horizontal" id="adminProfileForm">
            <div class="form-group">
                <label class="col-sm-3 control-label">用户名：</label>
                <div class="col-sm-9">
                    <p class="form-control-static" id="username">admin</p>
                </div>
            </div>
            <div class="form-group">
                <label for="realName" class="col-sm-3 control-label">真实姓名：</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="realName" placeholder="请输入真实姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-3 control-label">电子邮箱：</label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="email" placeholder="请输入电子邮箱">
                </div>
            </div>
            <div class="form-group">
                <label for="phone" class="col-sm-3 control-label">联系电话：</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="phone" placeholder="请输入联系电话">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">角色：</label>
                <div class="col-sm-9">
                    <p class="form-control-static" id="role">管理员</p>
                </div>
            </div>
            <div class="form-group">
                <label for="oldPassword" class="col-sm-3 control-label">原密码：</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="oldPassword" placeholder="请输入原密码">
                </div>
            </div>
            <div class="form-group">
                <label for="newPassword" class="col-sm-3 control-label">新密码：</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="newPassword" placeholder="请输入新密码">
                </div>
            </div>
            <div class="form-group">
                <label for="confirmPassword" class="col-sm-3 control-label">确认密码：</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入新密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <button type="button" class="btn btn-primary btn-save" onclick="saveProfile()">保存修改</button>
                </div>
            </div>
            <div class="alert alert-success" id="successAlert">
                <strong>成功！</strong> 个人信息已更新。
            </div>
            <div class="alert alert-danger" id="errorAlert">
                <strong>错误！</strong> <span id="errorMessage"></span>
            </div>
        </form>
    </div>

<script>
// 页面加载完成后执行
$(function(){
    // 模拟数据
    setTimeout(function() {
        $('#realName').val('管理员');
        $('#email').val('admin@example.com');
        $('#phone').val('13800138000');
    }, 100);
});

// 验证邮箱格式
function isValidEmail(email) {
    var re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return re.test(email);
}

// 显示错误信息
function showError(message) {
    $('#errorMessage').text(message);
    $('#errorAlert').fadeIn();
    setTimeout(function() {
        $('#errorAlert').fadeOut();
    }, 3000);
}

// 显示成功信息
function showSuccess() {
    $('#successAlert').fadeIn();
    setTimeout(function() {
        $('#successAlert').fadeOut();
    }, 3000);
}

// 保存个人信息
function saveProfile() {
    // 获取表单数据
    var realName = $('#realName').val();
    var email = $('#email').val();
    var phone = $('#phone').val();
    var oldPassword = $('#oldPassword').val();
    var newPassword = $('#newPassword').val();
    var confirmPassword = $('#confirmPassword').val();
    
    // 验证邮箱格式
    if(email && !isValidEmail(email)) {
        showError('请输入有效的电子邮箱');
        return;
    }
    
    // 如果输入了新密码，则必须输入原密码且两次新密码必须一致
    if(newPassword) {
        if(!oldPassword) {
            showError('请输入原密码');
            return;
        }
        
        if(newPassword !== confirmPassword) {
            showError('两次输入的新密码不一致');
            return;
        }
    }
    
    // 模拟更新成功
    showSuccess();
    
    // 清空密码字段
    $('#oldPassword').val('');
    $('#newPassword').val('');
    $('#confirmPassword').val('');
}
</script>
</body>
</html> 